<template>
    <div class="home">
        <a-menu v-model="current" mode="horizontal">
            <a-menu-item
                v-for="item in menu"
                :key="item.name"
                @click="jump(item.path)"
            >{{item.name}}</a-menu-item>
        </a-menu>
        <div id="map"></div>
        <a-button id="reset" type="primary" @click="reset">重置</a-button>

        <div class="childComponents">
            <router-view @drawPoint="drawPoint" />
        </div>

        <!-- <keep-alive>
      <router-view />
        </keep-alive>-->
    </div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
import { importAMap } from '@/platform/utils/map';

@Component
export default class Home extends Vue {
    current: string[] = ['批量标点'];
    map: any = undefined;
    menu: { name: string; path: string }[] = [
        // {
        //     name: '石碣地图',
        //     path: '/shijie'
        // },
        {
            name: '批量标点',
            path: '/points'
        },
        {
            name: '录入路段',
            path: '/record'
        },
        {
            name: '路段验证',
            path: '/validate'
        }
    ];
    test: Function = test;

    jump(name: string): void {
        this.$router.push(name);
    }

    reset() {
        this.map.clearMap();
    }

    drawPoint(data: any[]) {
        let markers: AMap.Marker[] = [];
        if (data) {
            data.forEach((vo: IObject) => {
                let point = new AMap.LngLat(vo.lng, vo.lat);
                let marker = new AMap.Marker({
                    position: point,
                    extData: vo
                });
                markers.push(marker);
            });
        }
        let markerLayer = new AMap.OverlayGroup(markers);
        markerLayer.on('click', (event: any) => {
            let data = event.target.getExtData();
            let html = [];
            const infoWindow:AMap.InfoWindow = new AMap.InfoWindow({offset:new AMap.Pixel(0,-33)})
            for (let key in data) {
                html.push(`<b>${key}</b>：${data[key]}`);
            }
            infoWindow.setContent(`
            <div style="width:400px;padding:20px 10px;font-size:14px;line-height:24px;">
                ${html.join('<br>')}
            </div>
            `);
            infoWindow.open(this.map, event.target.getPosition());
        });
        this.map.add(markerLayer);
        this.map.setFitView(markerLayer.getOverlays());
    }

    mounted() {
        importAMap().then(() => {
            this.map = new AMap.Map('map', {
                resizeEnable: true,
                zoom: 15,
                center: [113.874378, 23.10591]
            });
        });
    }
}
</script>
<style lang="scss" scoped>
#map {
    position: absolute;
    width: 100%;
    height: calc(100% - 48px);
}
#reset {
    position: absolute;
    top: 8px;
    right: 10px;
}
.childComponents {
    position: absolute;
    background-color: #ffff;
    width: 420px;
    padding: 10px 15px;
    border: 1px solid #d6d6d6;
    border-radius: 0 0 10px 10px;
}
</style>